<template>
  <div class="mt-[600px]">
    <div class="wrap w-screen h-screen" @wheel.stop.prevent="slideImgwheel">
      <img
        :ref="setItemRef"
        class="w-[100%] h-[100%]"
        src="/src/assets/images/hero_style1__ejjuw3sw3t0m_xlarge_2x.jpg"
      />
      <!-- 设置 value="100"  默认开始之前不裁剪-->
      <input @input="hahah" ref="inputOne" type="range" value="100" />
      <img
        :ref="setItemRef"
        class="w-[100%] h-[100%]"
        src="/src/assets/images/hero_style2__gbh1d5shzmie_xlarge_2x.jpg"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

let inputOne = ref(null);
// 图片元素数组
let images = ref([]);
const setItemRef = (el) => {
  images.value.push(el);
};
console.log("images", images);

//滚动图片的序号0,1,2...
let slideImg = ref(1);
// 滚动效果
const slideImgwheel = (event) => {
  // event.deltaY垂直滚动量一直为150
  //  Math.sign获取数值的正负-1,0,1
  let delta = Math.sign(event.deltaY);

  if (delta === 1) {
    console.log("+++");
    // 右滑动
    inputOne.value.value = Number(inputOne.value.value) + 10;
  } else if (delta === -1) {
    console.log("----");
    // 左滑动
    inputOne.value.value = Number(inputOne.value.value) - 10;
  }
  console.log(" input.value", inputOne.value.value);
  hahah();
};

const hahah = () => {
  inputOne.value.parentNode.style.setProperty(
    "--pos",
    Number(inputOne.value.value) / 100
  );
  if (inputOne.value.value == 0 && slideImg.value == 1) {
    console.log("111111");

    slideImg.value++;
    inputOne.value.value = 100;
    inputOne.value.parentNode.style.setProperty(
      "--pos",
      inputOne.value.value / 100
    );
    // 左滑动（正序）  图片1地址为图片2地址 图片2地址为图片3地址
    images.value[0].src =
      "/src/assets/images/hero_style2__gbh1d5shzmie_xlarge_2x.jpg";
    images.value[1].src =
      "/src/assets/images/hero_style3__ebrovo7velkm_xlarge_2x.jpg";
  } else if (inputOne.value.value == 100 && slideImg.value == 2) {
    console.log("22222");

    slideImg.value--;
    inputOne.value.value = 0;
    inputOne.value.parentNode.style.setProperty(
      "--pos",
      inputOne.value.value / 100
    );
    // 右滑动（逆序）  图片3地址为图片2地址 图片2地址为图片1地址
    images.value[0].src =
      "/src/assets/images/hero_style1__ejjuw3sw3t0m_xlarge_2x.jpg";
    images.value[1].src =
      "/src/assets/images/hero_style2__gbh1d5shzmie_xlarge_2x.jpg";
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  position: relative;
  margin: 50px auto;
}
[type="range"] {
  margin: 0;
  -webkit-appearance: none;
  position: absolute;
  height: 100%;
  width: 100%;
  background: none;
  overflow: hidden;
}
::-webkit-slider-runnable-track {
  background-color: transparent;
  height: 100%;
}
::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px;
  height: 100%;
  background-color: #18a0fb;
}
img:first-of-type {
  // position: absolute;
  position: absolute;
  clip-path: inset(0 calc(100% - var(--pos, 1) * 100%) 0 0);
}
</style>
